Wayne Porter's profile

Oakley Plazma 2.0 Rive Demo

Reimagined Oakley landing page, focused on the Plazma 2.0 model using Rive.app

My goal was to reimagine the Oakley site and overall experience, driving high-quality interactive content to the foreground.  

Oakley makes amazing products, but their site is slow and a bit frustrating to work with.  Also I feel that the quality of the visuals have diminished over the years and a product refresh is needed.

Model provided by Eugene (Gor) Korolev

Give the interactive demo below a few moments to load...
My process is pretty straight forward when it comes to this type of work.  I use Cinema 4D and Redshift for all of my 3D animation, lighting and rendering, in this case I exported a simple setup using a semi gloss clay material and multiple passes to composite the various options in After Effects.  I separated the lenses and created a secondary pass for the clear variant.

Here are some hero stills of the design.
For the transition, I wanted to do something fun and unexpected, but also not overwhelming and complicated.  Oakley has a strong brand that is rooted in clean design and technical detail, and I think this transition shows off that side of the brand well.
To achieve this look, I rendered various passes out of Cinema 4D as well as an animated light mask you see below.  I then composited the sunglass renders over one another to reveal the second version over the first.  
Rive was the best application for the final interactive prototype.  It runs fast and makes the logic setup a breeze with the easy animation tools and state machine.  Below is my general artboard setup. 
The state machine setup was pretty straight forward as well.  For configurators, it may be useful to use a Number Input or the "Any State" option, but since this was just between two colors, this state machine setup works just fine and is really tidy.
This was a lot of fun to create and I really enjoyed the process from start to finish.  Using my favorite tools makes everything easier and more enjoyable in the end, and Cinema 4D, After Effects and Rive are those tools for me.

Thank you for watching!
Oakley Plazma 2.0 Rive Demo
Published:

Owner

Oakley Plazma 2.0 Rive Demo

Published: